<template>
  <!-- 投注记录 -->
  <div class="information-content-h5">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
      <h4 @click="openFilter"><i-tabler-filter-edit />{{ t("RescueFund.text13") }}</h4>
    </h1>
    <header class="betting-record-h5__header">
      <div>
        <span>{{totalMoney.allBetMoney}}</span>
        <em>{{t('BetRecord.BetAmount')}}</em>
      </div>
      <div>
        <span>{{totalMoney.allvalidBetMoney}}</span>
        <em>{{t('BetRecord.ValidAmount')}}</em>
      </div>
      <div>
        <span>{{totalMoney.allWinMoney}}</span>
        <em>{{t('BetRecord.Payout')}}</em>
      </div>
    </header>

    <div class="betting-record-h5__checkbox">
      <el-checkbox v-model="form.isBet" :label="t('BetRecord.ViewBets')" class="normal" />
    </div>

    <ul class="betting-record-h5__list">
      <li v-for="item in list" :key="item.id">
        <h3>
          <dl>
            <em><img :src="item.playIcon" alt=""></em>
            <span class="betting-record__tit"> {{ item.gameName }}</span>
          </dl>
          <span>{{ parseTime(item.betTime) }}</span>
          <span>{{ t(getEnumValue("bettingRecordStatus", `${item.status}`)) }}</span>
        </h3>
        <h4>
          <span class="betting-record-li">
            <em><img :src="item.currencyIcon" alt="">{{item.betMoney}}</em>
            <h5>{{t('BetRecord.BetAmount')}}</h5>
          </span>
          <span class="betting-record-li">
            <em>{{item.validBetMoney}}</em>
            <h5>{{t('BetRecord.EffectiveBet')}}</h5>
          </span>
          <span class="betting-record-li brl">
            <em><img :src="item.currencyIcon" alt="">{{item.winMoney}}</em>
          </span>
        </h4>
      </li>
    </ul>
    <!-- 过滤框 -->
    <van-popup
      v-model:show="showBottom"
      position="bottom"
      class="mine-h5-popup"
      :style="{ height: '80%' }"
    >
      <el-form :model="form" ref="passwordFormRef" class="mine-h5-popup-content" size="small">
        <el-form-item class="z-form-item-flex average">
          <h3 class="h5-popup-title">{{t('Bet.Time')}}</h3>
          <div class="betting-record-tab">
            <div :class="{'active': item.active === form.timeType}" v-for="item in getEnumOptions('bettingRecordTimeType')" :key="item.value" @click="handlerTimeType(item)">{{item.label}}</div>
          </div>
        </el-form-item>
        <el-form-item class="z-form-item-flex average">
          <el-input v-model="form.startDate" placeholder="Approved by" @focus="showStartDate = true" />
          <el-input v-model="form.endDate" placeholder="Approved by" @focus="showEndDate = true" />
        </el-form-item>
        <el-form-item prop="currencyId">
          <h3 class="h5-popup-title">{{ t('BetRecord.CurrencyName') }}</h3>
          <ZH5Radio v-model:navs="currencyNavs" size="small" v-model:active="currencyActive" v-model:value="form.currencyId"/>
        </el-form-item>
        <el-form-item prop="status">
          <h3 class="h5-popup-title">{{t('BetRecord.Status')}}</h3>
          <ZH5Radio v-model:navs="navs" v-model:active="active" v-model:value="form.status"/>
        </el-form-item>
        <el-form-item >
          <h3 class="h5-popup-title">{{ t('BetRecord.GameSelected') }}</h3>
          <div class="games-type-selector">
            <div class="games-type-selector-header">
              <el-checkbox v-model="form.all" :label="t('BetRecord.All')" @change="handleToggleAll"/>
              <el-checkbox v-model="form.reverse" :label="t('BetRecord.ReverseSelection')" @change="handleToggleReverse"/>
            </div>
            <div class="games-type-selector-main">
              <div class="games-type-selector-list" v-for="item in gameTypeAndChannel" :key="item.type">
                <div class="games-type-selector-list__left">
                  <el-checkbox-group v-model="item.checked" @change="handleChecked($event, 'item', item)">
                    <el-checkbox :label="item.type">{{ t(getEnumValue('gamesType', `${item.type}`)) }}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="games-type-selector-list__right">
                  <el-checkbox-group v-model="item.nextChecked" @change="handleChecked($event, 'next', item)">
                    <el-checkbox :label="next.type"  v-for="next in item.next" :key="next.type">{{ next.typeName }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="h5-popup-search-button" @click="search">{{t('BetRecord.Search')}}</el-button>
        </el-form-item>
      </el-form>
    </van-popup>
    <!-- startDate -->
    <van-popup
      v-model:show="showStartDate"
      position="bottom"
    >
      <van-date-picker
        v-model="form.startDateHanlder"
        title="选择日期"
        :columns-type="['year', 'month', 'day']"
        :min-date="new Date(2020, 0, 1)"
        :max-date="new Date(2055, 5, 1)"
        @confirm="confirmStartDate"
        @cancel="showStartDate = false"
      />
    </van-popup>
    <!-- endDate -->
    <van-popup
      v-model:show="showEndDate"
      position="bottom"
    >
      <van-date-picker
        v-model="form.endDateHanlder"
        @confirm="confirmEndDate"
        @cancel="showEndDate = false"
        title="选择日期"
        :columns-type="['year', 'month', 'day']"
        :min-date="new Date(2020, 0, 1)"
        :max-date="new Date(2055, 5, 1)"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="BettingRecordH5">
import recordApi from '@/api/modules/record';
import nocache from '@/store/nocache';
import userinfo from '@/store/userinfo';
import { getEnumValue, getEnumOptions } from '@/utils/enums';
import { parseTime } from '@/utils/format';

const { t } = useI18n();
const emits = defineEmits(['back']);
const piniaUserinfo:any = userinfo();
const piniaNocache:any = nocache();
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});

const startDate = parseTime(new Date().getTime() - 3600 * 1000 * 24 * 7, 'dateobject');
const endDate = parseTime(new Date(), 'dateobject');

const data:any = reactive({
  showBottom: false,
  showStartDate: false,
  showEndDate: false,
  form: {
    currencyId: piniaUserinfo.getCurrentWallet.currencyId,
    status: "3",
    timeType: '1',
    startDate: `${startDate.y}-${startDate.m}-${startDate.d}`,
    endDate: `${endDate.y}-${endDate.m}-${endDate.d}`,
    startDateHanlder: [startDate.y, startDate.m, startDate.d],
    endDateHanlder: [endDate.y, endDate.m, endDate.d],
  },
  navs: getEnumOptions('bettingRecordStatus'),
  active: '3',
  currencyNavs: computed(()=>{
    return piniaUserinfo.getWallet.map((im:any)=>{
      return {
        ...im,
        label: im.currencyName,
        active: im.currencyId,
        value: im.currencyId
      }
    })
  }),
  currencyActive: piniaUserinfo.getCurrentWallet.currencyId,
  list: [],
  unclaimed: [],
  unreceived: -1, //是否有待领取的状态标识符
  totalMoney: {},
  pagination: {
    total: 0,
    pageSize: 10,
    pageNum: 1
  },
  gameTypeAndChannel: [],
});

const {
  showBottom,
  showStartDate,
  showEndDate,
  form,
  navs,
  active,
  currencyNavs,
  currencyActive,
  list,
  unclaimed,
  unreceived,
  totalMoney,
  pagination,
  gameTypeAndChannel,
} = toRefs(data);

// 顶顶顶----
const openFilter = () => {
  showBottom.value = true;
}

watch(()=> piniaNocache.getHitBottom, ()=>{
  console.log('hitBottom', pagination.value.pageNum);
  let totalPage = Math.ceil(pagination.value.total / pagination.value.pageSize);
  if(pagination.value.pageNum < totalPage){
    pagination.value.pageNum ++;
    search();
  }
}, {})


// 总的
const getUserBetInfoAllBetAndWin = (obj: any) => {
  recordApi.getUserBetInfoAllBetAndWin(obj).then((response:any)=>{
    console.log("总的数据", response)
    if(response.code === 200){
      totalMoney.value = response.data;
    }
  });
}

// 搜索
const search = () => {
  showBottom.value = false;
  piniaNocache.setLoading(true);
  const obj = {
    currencyId: form.value.currencyId,
    gameChannel: form.value.gameChannel || "",
    gameType: form.value.gameType || "",
    isBet: form.value.isBet ? 1 : 0,
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
    startTime: form.value.startDate,
    endTime: form.value.endDate,
    status: form.value.status,
    timeType: form.value.timeType,
    userId: Number(piniaUserinfo.getUserinfo.user.id),
  };
  recordApi.getUserBetInfo(obj).then((response:any)=>{
    if(response.code === 200){
      if(response.code === 200){
        pagination.value.total = response.total;
        list.value = list.value.concat(response.rows || []);
        unclaimed.value = response.rows.filter((item:any) => item.status == 0)
        if (unclaimed.value.length > 0) {
          unreceived.value = 1
        } else {
          unreceived.value = -1
        }
      }
    }
  }).finally(()=>{
    piniaNocache.setLoading(false);
  });
  getUserBetInfoAllBetAndWin(obj);
}
search();

// 时间选择
const confirmStartDate = ({selectedValues}: any) => {
  form.value.startDate = selectedValues.join('-');
  showStartDate.value = false;
}
// 时间选择
const confirmEndDate = ({selectedValues}: any) => {
  form.value.endDate = selectedValues.join('-');
  showEndDate.value = false;
}

// 所有游戏类型
const getGameTypeAndChannel = () => {
  recordApi.getGameTypeAndChannel({}).then((response:any)=>{
    if(response.code === 200){
      gameTypeAndChannel.value = response.data || [];
      gameTypeAndChannel.value.forEach((element: any) => {
        element.checked = [element.type];
        element.nextChecked = element.next.map((im:any)=>im.type);
      });
      form.value['all'] = true;
    }
  });
}
getGameTypeAndChannel();

// 全选
const handleToggleAll = (val:any) => {
  if(val === 'cancelAll'){
    form.value.all = false;
  }else{
    if(val){
      gameTypeAndChannel.value.forEach((element: any) => {
        element.checked = [element.type];
        element.nextChecked = element.next.map((im:any)=>im.type);
      });
    }else{
      gameTypeAndChannel.value.forEach((element: any) => {
        element.checked = [];
        element.nextChecked = [];
      });
    }
  }
  handleToggleReverse('camcelReverse');
}

// 反选
const handleToggleReverse = (val:any) => {
  if(val === 'camcelReverse'){
    form.value.reverse = false;
  }else{
    handleToggleAll('cancelAll');
    form.value.reverse = val;
    gameTypeAndChannel.value.forEach((element: any) => {
      element.checked = element.checked.length === 0 ? [element.type] : [];
      const filterNextChecked = element.next.filter((im:any) => element.nextChecked.indexOf(im.type) == -1).map((im:any)=> im.type);
      element.nextChecked = filterNextChecked;
    });
  }
}

// 切换选择框
const handleChecked = (val:any, type: string, item: any) => {
  if(type === 'item'){
    if(val.length !== 0){
      item.nextChecked = item.next.map((im:any)=>im.type);
    }else{
      item.nextChecked = [];
    }
  }
}

//
const handlerTimeType = (item:any) => {
  form.value.timeType = item.value;
}

const goBack = () => {
  emits('back');
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);

.betting-record-tab{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  &>div{
    width: 47%;
    height: var(--rem-40);
    font-size: var(--rem-13);
    font-weight: 700;
    line-height: var(--rem-40);
    text-align: center;
    border-radius: var(--rem-20);
    box-sizing: border-box;
    &.active{
      background-color: var(--z-bg-btn);
      color: var(--z-font-white);
    }
  }
}
.betting-record-h5__header{
  background: url(../../assets/images/me/record.png) no-repeat;
  background-size: cover;
  height: var(--rem-80);
  margin: 0 var(--rem-14) 0;
  display: flex;
  justify-content: space-between;
  margin-top: var(--rem-20);
  align-items: center;
  &>div{
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    span{
      font-weight: 700;
      font-size: var(--rem-16);
      color: #fff;
    }
    em{
      margin-top: var(--rem-6);
      font-weight: 500;
      font-size: var(--rem-11);
      font-style: normal;
      opacity: .6;
      color: #fff;
    }
  }
}
.betting-record-h5__checkbox{
  margin: var(--rem-20) var(--rem-14) 0;
}
.betting-record-h5__list{
  padding: var(--rem-5) var(--rem-14) 0;
  li{
    width: 100%;
    padding: var(--rem-16) var(--rem-10);
    box-sizing: border-box;
    background-color: var(--z-bg-card);
    border-radius: var(--rem-12) var(--rem-12) 0 0/var(--rem-12) var(--rem-12) 0 0;
    h3{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      font-size: var(--rem-12);
      text-align: center;
      padding-bottom: var(--rem-14);
      border-bottom: 1px solid var(--border-color);
      dl{
        display: flex;
        align-items: center;
        em{
          width: var(--rem-30);
          height: var(--rem-30);
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: var(--bg-table-header-h5);
          border-radius: var(--rem-8);
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: var(--rem-20);
            height: var(--rem-18);
          }
        }
        span.betting-record__tit{
          width: var(--rem-50);
          text-overflow: ellipsis;
          overflow: hidden;
          margin-left: var(--rem-5);
          white-space: nowrap;
        }
      }
    }
    h4{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--rem-20) 0 var(--rem-10);
      h5{
        font-weight: 500;
        font-size: var(--rem-11);
        margin-top: var(--rem-10);
      }
      .betting-record-li{
        display: flex;
        flex-direction: column;
        align-items: center;
        &.brl{
          img{
            width: var(--rem-20);
            height: var(--rem-20);
          }
        }
        em{
          display: flex;
          align-items: center;
          justify-content: center;
          font-style: normal;
        }
        img{
          width: var(--rem-15);
          height: var(--rem-15);
          border-radius: 100%;
          margin-right: var(--rem-5);
        }
        font-weight: 700;
        font-size: var(--rem-13);
        color: var(--z-font-anti);
      }
    }
  }
}

.games-type-selector{
  width: 100%;
  .games-type-selector-header{
    padding: 0 var(--rem-20);
  }
  .games-type-selector-main{
    background-color: var(--z-bg-def);
    border-radius: var(--rem-20);
    padding: var(--rem-20);
    margin-top: var(--rem-10);
    box-sizing: border-box;
    .games-type-selector-list{
      display: flex;
      border-bottom: var(--rem-2) solid var(--border-table-line);
      padding: var(--rem-10) 0;
      .games-type-selector-list__left{
        width: var(--rem-120);
        box-sizing: border-box;
        border-right: var(--rem-2) solid var(--border-table-line);
        margin-right: var(--rem-20);
      }
      .games-type-selector-list__right{
        width: calc(100% - var(--rem-120));
      }
    }
  }
  .games-type-selector-btn{
    width: var(--rem-400);
    display: block;
    margin: var(--rem-50) auto 0;
  }
}
</style>
